import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Modal } from 'antd-mobile';
import { ToastTips } from '../../../../../common/toastTips/tosat';
import content from '../../../common/contentCss/content.css';
import styles from './common.css';
import CustTitle from '../../../common/title/title';
import SetEducation from './pages/setEducation';
import DeleteBtnAlert from '../../../../../common/alert/deleteBtnAlert/deleteBtnAlert';

const alert = Modal.alert;

function Index({dispatch,setEducation,personal}) {


  const { id,entranceTime, graduationTime, collegeName,
    education, major, description, pageStatus} = setEducation;

    // console.log('pageStatus',pageStatus);
    // console.log('entranceTime',entranceTime);
    // console.log('graduationTime',graduationTime);
    // console.log('collegeName',collegeName);
    // console.log('education',education);
    // console.log('major',major);
    // console.log('description',description);

  let titleProps = '';
  if(pageStatus == 'edit'){
    titleProps = {
      titleName:'教育经历',
      showSaveBtnStatus:true,
      saveBtnName:'修改',
      goBack(){
        dispatch(routerRedux.goBack())
      },
      onSave(id){
        if(validataInfo()){
          dispatch({
            type:'setEducation/putWorkTime',
          })
        }
      }
    }
  }else{
    titleProps = {
      titleName:'教育经历',
      showSaveBtnStatus:true,
      saveBtnName:'保存',
      goBack(){
        dispatch(routerRedux.goBack())
      },
      onSave(){
        if(validataInfo()){
          dispatch({
            type:'setEducation/addMyEducation',
          })
        }
      }
    }
  }

  function validataInfo (){

    if(!entranceTime){
      ToastTips('请选择入学时间', 2000, null);
      return false;
    }
    if(!graduationTime){
      ToastTips('请选择毕业时间', 2000, null);
      return false;
    }
    if(!collegeName){
      ToastTips('请填写院校名称', 2000, null);
      return false;
    }
    if(!education){
      ToastTips('请填写学历', 2000, null);
      return false;
    }
    if(!major){
      ToastTips('请填写专业', 2000, null);
      return false;
    }
    // if(!description){
    //   ToastTips('请填写在校情况', 2000, null);
    //   return false;
    // }
    return true;
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F5F5F9'}}></div>;

  const educationProps = {
    pageStatus,
    entranceTime,
    graduationTime,
    collegeName,
    education,
    major,
    description,
    saveEntranceTime(value){
      console.log('入学时间', value);
      dispatch({
        type:'setEducation/querySuccess',
        payload:{
          entranceTime:value,
        }
      })
    },
    saveGraduationTime(value){
      console.log('毕业时间', value);
      dispatch({
        type:'setEducation/querySuccess',
        payload:{
          graduationTime:value,
        }
      })
    },
    saveCollegeName(value){
      console.log('院校名称', value);
      dispatch({
        type:'setEducation/querySuccess',
        payload:{
          collegeName:value,
        }
      })
    },
    saveEducation(value){
      console.log('学历', value);
      dispatch({
        type:'setEducation/querySuccess',
        payload:{
          education:value,
        }
      })
    },
    saveMajor(value){
      console.log('专业', value);
      dispatch({
        type:'setEducation/querySuccess',
        payload:{
          major:value,
        }
      })
    },
    saveDescription(value){
      console.log('在校情况', value);
      dispatch({
        type:'setEducation/querySuccess',
        payload:{
          description:value,
        }
      })
    },
    onDelete(){
      showDeleteTipsAlert(id);
    }
  }

  const showDeleteTipsAlert =(id)=>{
    let isDeleteAlert;
    const isDeleteProps={
      tipsContent:'确定删除此工作经历信息吗？',
      okClick(){
        console.log('ok');
        dispatch({
          type:'setEducation/deleteEducation',
          payload:{
            id,
          }
        })
        isDeleteAlert.close();
      },
      cancelClick(){
        isDeleteAlert.close();
      },
    }
    return (
      isDeleteAlert = alert('', <DeleteBtnAlert {...isDeleteProps}/>, [])
    )
  }

  return(
    <div className={content.content}>
      <CustTitle {...titleProps}/>
      <div style={{
        marginTop: '2.8125em',
      }}>
        <SetEducation {...educationProps}/>
      </div>
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    personal: state.personal,
    setEducation: state.setEducation
  }
}

export default connect(mapStateToProps)(Index);
